<template>
  <fragment>
    <p
      v-for="bulletItem in bulletList"
      :key="bulletItem.dataId"
      data-type="item_list"
      :class="getClassName(bulletItem, blockData.bulletData.dataLang)"
      :data-action="bulletItem.type"
      :data-id="bulletItem.textData.dataId"
      :data-note-id="bulletItem.dataId"
      :data-block-id="blockData.blockId"
      :data-block-data-id="blockData.bulletData.dataId"
      :data-level-num="bulletItem.levelNum"
      :data-level="bulletItem.level"
      :data-number="getNumber(bulletItem)"
      :data-value="getDataValue(bulletItem)"
      :data-lang="blockData.bulletData.dataLang"
      :[dataIsExample]="bulletItem.textData.isExample ? '1' : null"
    >
      <iframe-checkbox :blockData="blockData" :bulletItem="bulletItem" :itemlist="true" />
      <template v-for="(i, idx) of getContentList(bulletItem)">
        <template v-if="i.contentType === 'text'">{{ i.content }}</template>
        <RefSpan v-else-if="i.contentType === 'refdoc' || i.contentType === 'refchapter'" :key="idx" :item="i" />
        <sub v-else-if="i.contentType === 'sub'" data-type="sub" :key="'sub' + idx">{{ i.fullContent }}</sub>
        <sup v-else-if="i.contentType === 'sup'" data-type="sup" :key="'sup' + idx">{{ i.fullContent }}</sup>
        <img
          v-else-if="i.contentType === 'inline_formula'"
          data-type="inline_formula"
          :key="'inline_formula' + idx"
          :data-id="i.dataId"
          :width="i.formulaData.width"
          :height="i.formulaData.height"
          :src="i.formulaData.url"
          :data-latex="i.formulaData.latex || ''"
        />
        <img
          v-else-if="i.contentType === 'inline_figure'"
          data-type="inline_figure"
          :key="'inline_figure' + idx"
          :data-id="i.dataId"
          :width="i.figureData.attributes.width"
          :height="i.figureData.attributes.height"
          :src="i.figureData.attributes.url"
        />
        <CommonSpan v-else :key="'commonspan' + idx" :item="i" />
      </template>
    </p>
  </fragment>
</template>
<script>
import IframeCheckbox from '../IframeCheckbox.vue'
import RefSpan from './span/RefSpan.vue'
import CommonSpan from './span/CommonSpan.vue'
import { getValue } from '@/utils/plugins/itemlist/itemlistSetting'
import { Fragment } from 'vue-fragment'
import { v4 as uuid } from 'uuid'

export default {
  props: {
    blockData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      bulletId: uuid(),
      dataIsExample: 'data-is-example'
    }
  },
  computed: {
    bulletList() {
      return this.blockData?.bulletData?.bulletList || []
    },
    bulletItemData() {
      const item = this.bulletItem
      return {
        ...item,
        className: this.getClassName(item, this.blockData.bulletData.dataLang),
        grade: this.getGrade(item),
        number: this.getNumber(item),
        value: getValue(this.getGrade(item), this.getNumber(item))
      }
    }
  },
  methods: {
    getClassName(bulletItemData, dataLang) {
      return `item_list ${bulletItemData.type} ${dataLang}`
    },
    getGrade(bulletItemData) {
      const { level } = bulletItemData
      return level?.split('.')?.length || 1
    },
    getNumber(bulletItemData) {
      const levels = bulletItemData?.levelNum?.split?.('.') || null
      return levels ? parseInt(levels[levels.length - 1]) : 1
    },
    getContentList(bulletItem) {
      // 第0个content是编号，作为补充数据传给后端使用
      return bulletItem?.textData?.contentList?.slice?.(1) || []
    },
    getDataValue(bulletItemData) {
      return getValue(parseInt(bulletItemData.level), this.getNumber(bulletItemData))
    }
  },
  components: { Fragment, IframeCheckbox, RefSpan, CommonSpan }
}
</script>
<style></style>
